<!--
 * @Description: 可编辑的表单组件
-->

<template>
  <!-- 输入框 -->
  <el-input
    :value="modelValue"
    :type="type"
    :size="formSize"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    :maxlength="maxlength"
    :rows="rows"
    @change="change"
  />
</template>

<script>
export default {
  name: "CInput",
  components: {},
  props: {
    //绑定值
    modelValue: {
      type: String,
      default: "",
    },
    //'text' | 'textarea' | 'password' | 'button' | 'checkbox' | 'file' | 'number' | 'radio' |
    type: {
      type: String,
      default: "text",
    },
    // 是否去除首尾空格
    isTrim: {
      type: Boolean,
      default: true,
    },
    // 空时，提示信息
    placeholder: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: Number,
      default: 256,
    },
    rows: {
      type: Number,
      default: 3,
    },
    handleChange: {
      type: Function,
      defalut: () => {},
    },
    handleBlur: {
      type: Function,
      defalut: () => {},
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, ctx) {
    const change = (value) => {
      if (isTrim) {
        ctx.emit("update:modelValue", value.trim());
      } else {
        ctx.emit("update:modelValue");
      }
      ctx.emit("change");
    };
    return { change };
  },
};
</script>

<style lang="scss" scoped></style>
